<template>
	<a-drawer title="选择脚本" :width="500" :visible="visible"
		:footer-style="{ textAlign: 'right' }" @close="handleClose">
		<div class="top_con">
			<a-input @change="handleInputChange" style="width: 200px;" placeholder="请输入搜索关键词" v-model:value="pageInfo.title" />
			<a-button type="primary" style="margin-left: 20px; border-radius: 5px;"
				@click="handleCreateScript">创作脚本</a-button>
		</div>

		<div class="tab_con">
			<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
				<a-tab-pane v-for="item in tabList" :key="item.id" :tab="item.name">
					<a-spin :spinning="submitLoading">
						<div class="script_con" v-if="scriptList?.length">
							<div class="script_item" @click="lookScriptDetail(script_item)" v-for="(script_item, script_index) in scriptList" :key="script_index">
								<div class="top_con">
									<div class="script_title">{{script_item.title}}</div>
									<div class="script_desc">{{script_item.outline}}</div>
								</div>
								<div class="bottom_con">
									<div class="bottom_item" v-for="(props_item, props_index) in script_item.bottomList"
										:key="props_index">{{props_item.name}}</div>
								</div>
							</div>
						</div>
						<div class="empty_con" v-else>
							<a-empty />
						</div>
					</a-spin>
				</a-tab-pane>
			</a-tabs>
		</div>

		<scriptDetail :script_line_tag_id="activeKey" :scriptId="currentScriptId" :visible="detailVisible" @close="closeScriptDetail" />
		<createScript :script_line_tag_id="activeKey" :visible="createVisible" @close="closeCreate" />
		
		<template #footer>
			<a-space>
				<a-pagination v-model:current="pageInfo.page" v-model:pageSize="pageInfo.pageSize" :total="pageInfo.total" @change="handlePageChange" />
			</a-space>
		</template>
	</a-drawer>
</template>

<script>
	import {
		PlusOutlined
	} from '@ant-design/icons-vue';
	import {
		toRefs,
		defineComponent,
		reactive,
		ref,
		watch
	} from 'vue';
	import scriptDetail from "./scriptDetail.vue";
	import createScript from "./createScript.vue";
	import request from "../../../../../../common/utils/request";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		emits: ['close'],
		components: {
			scriptDetail,
			createScript
		},
		setup(props, context) {
			const state = reactive({
				tabList: [{
					name: '我的脚本',
					id: 'my'
				}],
				createVisible: false,
				bottomList: [{
					name: '6个场景'
				}, {
					name: '610次使用'
				}, {
					name: '时长00:00:00'
				}, {
					name: '186个成片'
				}],
				activeKey: 'my',
				detailVisible: false,
				pageInfo: {
					title: '',
					tagId: null,
					pageSize: 5,
					page: 1,
				},
				scriptList: [],
				currentScriptId: null,
				submitLoading: false
			});
			
			const handleClose = () => {
				context.emit('close')
			};
			
			const lookScriptDetail = (item) => {
				state.currentScriptId = item.id
				state.detailVisible = true
			}
			
			const closeScriptDetail = () => {
				state.detailVisible = false
				state.currentScriptId = null
			}
			
			const handleCreateScript = () => {
				state.createVisible = true
			}
			
			const closeCreate = () => {
				state.createVisible = false
				getMyscript()
			}

			const getTagList = () => {
				request.get('/work_ai', '/user/shotstack/script-line/tag/list').then(res => {
					state.tabList = [{
						name: '我的脚本',
						id: 'my'
					}]
					state.tabList = [...state.tabList, ...res.list]
					getMyscript()
				})
			}

			const getScriptList = () => {
				state.pageInfo.tagId = state.activeKey
				state.submitLoading = true
				request.get('/work_ai', '/user/shotstack/script-line/org/list', state.pageInfo).then(res => {
					state.submitLoading = false
					state.scriptList = res.list.data
					state.pageInfo.total = res.list.total
					state.scriptList.map(item => {
						item.bottomList = [{
							name: item.scene_count + '个场景'
						}, {
							name: item.used_count + '次使用'
						}, {
							name: '时长' + item.duration
						}, {
							name: item.video_count + '个成片'
						}]
					})
				}).catch(err=> {
					state.submitLoading = false
				})
			}

			const getMyscript = () => {
				state.pageInfo.tagId = null
				state.submitLoading = true
				request.get('/work_ai', '/user/shotstack/script-line/list', state.pageInfo).then(res => {
					state.submitLoading = false
					state.scriptList = res.list.data
					state.pageInfo.total = res.list.total
					state.scriptList.map(item => {
						item.bottomList = [{
							name: item.scene_count + '个场景'
						}, {
							name: item.used_count + '次使用'
						}, {
							name: '时长' + item.duration
						}, {
							name: item.video_count + '个成片'
						}]
					})
				}).catch(err=> {
					state.submitLoading = false
				})
			}
			
			const handleTabChange = (key) => {
				state.activeKey = key
				state.pageInfo.page = 1
				if(state.activeKey == 'my'){
					getMyscript()
				} else {
					getScriptList()
				}
			}
			
			const debounce = (func, wait = 2000, immediate = false) => {
				if (state.timeout !== null) clearTimeout(state.timeout);
				// 立即执行，此类情况一般用不到
				if (immediate) {
					typeof func === "function" && func();
				} else {
					// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
					state.timeout = setTimeout(function() {
						typeof func === "function" && func();
					}, wait);
				}
			}
			
			const handleInputChange = (e) => {
				debounce(()=>{
					if(state.activeKey == 'my'){
						getMyscript()
					} else {
						getScriptList()
					}
				})
			}
			
			const handlePageChange = (page, pageSize) => {
				state.pageInfo.page = page
				state.pageInfo.pageSize = pageSize
				if(state.activeKey == 'my'){
					getMyscript()
				} else {
					getScriptList()
				}
			}

			watch(() => props.visible, val => {
				if (val) {
					getTagList()
				}
			})

			return {
				...toRefs(state),
				handleClose,
				lookScriptDetail,
				closeScriptDetail,
				handleCreateScript,
				closeCreate,
				handleTabChange,
				handleInputChange,
				handlePageChange
			};
		},
	});
</script>

<style lang="less" scoped>
	.top_con {
		display: flex;
	}
	
	.empty_con{
		width: 100%;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.script_con {
		.script_item {
			border: 1px solid #ddd;
			margin-top: 15px;
			border-radius: 10px;

			&:nth-child(1) {
				margin-top: 0;
			}

			.top_con {
				padding: 25px 20px;
				display: flex;
				flex-direction: column;

				.script_title {
					color: #333;
					font-size: 14px;
				}

				.script_desc {
					color: #999;
					font-size: 12px;
					margin-top: 5px;
				}
			}

			.bottom_con {
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgb(250, 250, 252);
				cursor: pointer;

				.bottom_item {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>